<script setup>
import {ref} from "vue";
import {getDecodeData} from "@/api/lims/sop";

const props = defineProps({
  tableName:{ type:String, required:true},
  label:{ type:String, required:true},
  value:{ type:String, required:true},
  where:{ type:String, required:false},
  placeholder:{ type:String, required: false},
  allowCreate:{ type:Boolean, required: false},

})

const selectValue = ref([])
const options = ref([])
const dbType = 'sqlserver'

const queryConfig = ref({
  tableName:'',
  labelFiled:'',
  valueFiled:'',
  whereSql: '',
})

const genQuerySql = () => {
  let querySql = 'select distinct '
  querySql += props.value + ' as value, '
  querySql += props.label + ' as label '
  querySql += ' from ' + props.tableName
  querySql += ' where 1=1 '
  if (props.where && props.where.length > 0){
    querySql += ' and ' + props.where
  }
  return querySql
}

/**
 * 加载选项
 */
const loadOptions = () =>{
  let querySql = genQuerySql()
  getDecodeData(dbType, querySql).then(response =>{
    if (response.success){
      options.value = response.data
    }
  })
}
loadOptions()
</script>

<template>
  <el-select v-model="selectValue" :placeholder="placeholder" filterable clearable :allow-create="allowCreate">
      <el-option v-for="(item, index) in options"
                 :key="index"
                 :label="item.LABEL"
                 :value="item.VALUE"
      ></el-option>
  </el-select>
</template>

<style scoped lang="scss">

</style>